*{margin:0;padding:0}
body{margin:0 auto;width:100%;font-family:"Maison Neue Book",Helvetica,华文细黑,Arial;font-size:14px;}
a{color:#61a64b;text-decoration:none;}
a:hover{color:#66ccff;}
h1{font-size:3rem;}
h2{font-size:18px;}
h3{font-size:12px}
.wipe-overlay {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		background: #0f0;
		background-position: 50% 50px;
		background-size: 60px;
		width: 100%;
		transition: width .6s;
		transition-delay: .6s;
}
#mousewheel{display:none;}
/** change the index height upon the user_screen pix **/
/**@media screen and (width:1366px)
{
		header{height:380px;width:700px;margin:0 auto;text-align:center;color:#61a64b;}
#name{margin-top:250px;}
}
@media screen and (width:1920px)
{
		header{height:540px;width:700px;margin:0 auto;text-align:center;color:#61a64b;}
#name{margin-top:400px;}
}
**/
/** body start **/
@media screen and (width:1366px)
{
header {height:380px;
font-weight: 300;
font-style: normal;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin-left: 5%;}
#name{margin-top:250px;position:relative;}
#brague_logo{position:absolute;left:80%;top:30%;}
#llago_dialogue{color:#000;}
}
@media screen and (width:1920px)
{
header {height:540px;
font-weight: 300;
font-style: normal;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin-left: 5%;}
#name{margin-top:400px;position:relative;}
#brague_logo{position:absolute;left:80%;top:30%;}
#llago_dialogue{color:#000;}
}
#hitokoto{width:400px;
font-size: 1em;
line-height: 1.5em;
color: #999;
}

nav{width:100%;margin:0 auto;font-size:20px;height:50px;text-align:center;background:#fff;z-index:100;position:fixed;bottom:0px;transition: height .6s;
		transition-delay: .3s;
}
nav:before{
position: absolute;
content: "";
top: -1px;
left: 0;
right: 0;
height: 1px;
background: rgba(0,0,0,.05);
}
nav ul {margin:0 auto;list-style:none;}

nav >ul >li{float:left;margin-left:2%;margin-top:16px;font-size: 1em;position:relative;}
nav ul li .foot{position:fixed;right:2%;font-size:12px;line-height:20px;}
nav >ul >li >a:hover:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#0f0;}
nav ul li ul{visibility:hidden;}
nav ul li:hover>ul{visibility:visible;}
/** line **/
#line{
background:url(../image/bg1.png) repeat;
/* 栏宽度 */
-webkit-column-width:300px;
-moz-column-width:300px;
-o-colum-width:300px;
column-width:300px;
/* 两栏之间的间距 */
-webkit-column-gap:2px;
-moz-column-gap:2px;
-o-column-gap:2px;
column-gap:2px;
padding-top:2%;
}
.line{width:300px;word-wrap:break-word; overflow:hidden;margin-bottom:5%;background:#fff;box-shadow:0px 2px 10px #000;position:relative;-webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
cursor:pointer;padding-bottom:2%;}
/**.line{ display: inline-block;
        *display: inline;
        zoom: 1;
        border: 5px solid #fff;
        -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
        box-shadow: 0 2px 2px rgba(0,0,0,.1);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;  
}
#line:hover .line:not(:hover){
	-webkit-filter: blur(2px) grayscale(1);
	-moz-filter: blur(2px) grayscale(1);
	-o-filter: blur(2px) grayscale(1);
	-ms-filter: blur(2px) grayscale(1);
	filter: blur(2px) grayscale(1);
opacity: .7; /* fallback */  

.line img{display:block;width:100%;margin-bottom:2%;}
.movie_name{position:absolute;top:40%;left:0%;font-size:32px;visibility:hidden;color:#61a64b}
.line:hover>.movie_name{visibility:visible;}
.line:hover>img{opacity: .5;}
.more{padding:2% 0;text-align:center;}
#loadmore{font-size:28px;}
#randmore{font-size:28px;}




/**  loading **/
.spinner {
		display:none;
		
margin: 100px auto;
width: 32px;
height: 32px;
position: fixed;
top:30%;
left:50%;
}

.cube1, .cube2 {
background-color: #67CF22;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
}
.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}
@keyframes cubemove {
25% { 
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% { 
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% { 
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% { 
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% { 
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
#test img{float:left;width:100px;}
